<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
  background-size: cover;
}

.register-box {
  width: 500px;
  height: 500px;
  padding: 20px;
  /*border: 1px solid #ccc;*/
  border-radius: 20px;
  /*background-color: rgba(223,212,213,0.2);*/
  background-size: cover;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

.el-form-item{
  display: block;
  margin: 10px 100px;
  font-weight: bolder;
}
.Detail{
  margin-top: 30px;
}
</style>

<template>
  <div class="register-container">
    <div class="register-box">
      <h2>用户信息</h2>
      <el-form :model="user" :rules="rules" ref="registerRef">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="user.username" disabled />
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input v-model="user.email" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="user.phone" />
        </el-form-item>

        <el-form-item label="存储空间" prop="storageSize">
          <el-input v-model="showStorageSize" disabled/>
        </el-form-item>
      </el-form>
      <div class="Detail">
      <el-button type="primary" @click="update" style="margin-left:150px">确认修改</el-button>
      <el-button @click="router.push('/user/changePass')" type="warning">更改密码</el-button>
      </div>
    </div>
  </div>
</template>


<script setup>


import {computed, onMounted, ref} from "vue";
import {changePass, searchUser, updateUser, userLogout} from "../../apis/UserApi.js";
import {elPrompt} from "../../utils/elPrompt.ts";
import router from "../../router/router.js";
import showSize from "../../utils/showSize.js";

const showStorageSize = computed(()=>{
  return showSize(user.value.storageSize)
})

const user = ref({
  username:'',
  email:'',
  phone:'',
  storageSize:''
})

const rules=ref({
  email:[{ validator:checkEmail,trigger: 'blur'}],
  phone:[{ validator:checkPhone,trigger: 'blur'}],
})



function checkEmail(rule,value,callback){
  const regular = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (value === ''){
    callback(new Error('请输入邮箱！'))
  }else if(!regular.test(value)){
    callback(new Error('请输入正确的邮箱格式'))
  }else{
    callback()
  }
}


function checkPhone(rule,value,callback){
  const regular = /^1[3456789]\d{9}$/;
  if (value === ''){
    callback(new Error('请输入手机号！'))
  }else if(!regular.test(value)){
    callback(new Error('请输入正确的手机号格式'))
  }else{
    callback()
  }
}


function update(){
    updateUser(user.value,(result)=>{
      console.log(user.value.id)
      if (result.status === 200){
        elPrompt("更新成功","success")
        userDetail()
      }else {
        elPrompt(result.status,"error")
      }
    })
}

function userDetail(){
    searchUser((result)=>{
      user.value = result.data
    })
}


onMounted(()=>{
  userDetail()
})
</script>
